<template>
  <div class="monitor-layout">
    <div class="monitor-sider">
      <a-menu mode="inline" :selectedKeys="[selectedKey]" @click="onMenuClick">
        <a-menu-item key="dashboard">监控总览</a-menu-item>
        <a-menu-item key="redis">Redis监控</a-menu-item>
        <a-menu-item key="mysql">MySQL监控</a-menu-item>
        <a-menu-item key="cos">COS监控</a-menu-item>
      </a-menu>
    </div>
    <div class="monitor-content">
      <router-view />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  const router = useRouter()
  const route = useRoute()
  const selectedKey = ref(
    route.name === '系统监控'
      ? 'dashboard'
      : route.name?.toString().replace('监控', '').toLowerCase() || 'dashboard'
  )
  const onMenuClick = ({ key }: { key: string }) => {
    if (key === 'dashboard') router.push('/admin/monitor')
    else router.push(`/admin/monitor/${key}`)
    selectedKey.value = key
  }
</script>

<style scoped>
  .monitor-layout {
    display: flex;
    min-height: 100vh;
    background: none;
  }
  
  .monitor-sider {
    width: 220px;
    background: var(--theme-surface);
    border-right: 2px solid var(--theme-primary);
    box-shadow: 2px 0 24px var(--theme-shadow);
    padding: 0;
    position: fixed;
    left: 0;
    top: 70px;
    bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: all 0.3s ease;
  }
  
  .monitor-content {
    flex: 1;
    margin-left: 220px;
    padding: 32px;
    min-height: calc(100vh - 70px);
    overflow-y: auto;
    background: none;
  }
  
  :deep(.ant-menu) {
    background: transparent !important;
    color: var(--theme-text);
    font-size: 17px;
    font-family: 'JetBrains Mono', 'Consolas', 'Roboto Mono', monospace;
    border: none;
    transition: all 0.3s ease;
  }
  
  :deep(.ant-menu-item) {
    margin: 12px 0;
    border-radius: 10px;
    transition: all 0.3s ease;
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--theme-text) !important;
  }
  
  :deep(.ant-menu-item-selected) {
    background: var(--theme-primary) !important;
    color: var(--theme-surface) !important;
    box-shadow: 0 0 16px var(--theme-shadow);
    border-radius: 10px;
    font-weight: bold;
    border-left: 4px solid var(--theme-primary);
    transition: all 0.3s ease;
  }
  
  :deep(.ant-menu-item:hover) {
    background: var(--theme-primary) !important;
    color: var(--theme-surface) !important;
    transform: scale(1.04);
    box-shadow: 0 0 8px var(--theme-shadow);
    transition: all 0.3s ease;
  }

  /* 确保所有元素都使用主题色 */
  .monitor-layout * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }
</style>
